<!-- 交互记录 -->
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>交互记录</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="interaction-records-container" >
      <el-button class="addBtn" @click="dialogVisible = true">添加记录</el-button> 
      <!-- 添加记录弹出 -->
      <el-dialog  
      title="添加记录"  
      :visible.sync="dialogVisible"  
      width="50%"  
      @close="dialogVisible = false"  
    >  
      <el-form :model="form" ref="form" label-width="120px">  
        <el-form-item label="虚拟人ID">  
          <el-input v-model="form.virtualId"></el-input>  
        </el-form-item>  
        <el-form-item label="交互时间">  
          <el-date-picker  
            v-model="form.timestamp"  
            type="datetime"  
            placeholder="选择日期时间"  
          ></el-date-picker>  
        </el-form-item>  
        <el-form-item label="用户ID">  
          <el-input v-model="form.userId"></el-input>  
        </el-form-item>  
        <el-form-item label="交互类型">  
          <el-input v-model="form.interactionType"></el-input>  
        </el-form-item>  
        <el-form-item label="交互内容">  
          <el-input v-model="form.content"></el-input>  
        </el-form-item>  
        <el-form-item label="交互结果">  
          <el-input v-model="form.outcome"></el-input>  
        </el-form-item>  
      </el-form>  
      <span slot="footer" class="dialog-footer">  
        <el-button @click="dialogVisible = false">取消</el-button>  
        <el-button type="primary" @click="addRecordFromForm">确定</el-button>  
      </span>  
    </el-dialog>  
      <el-table :data="RecordList" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="virtualId" label="虚拟人ID" width="120"></el-table-column>
        <el-table-column prop="timestamp" label="时间" width="180"></el-table-column>
        <el-table-column prop="userId" label="用户ID" width="180"></el-table-column>
        <el-table-column prop="interactionType" label="交互类型" width="120"></el-table-column>
        <el-table-column prop="content" label="交互内容" width="300"></el-table-column>
        <el-table-column prop="device" label="交互设备" width="100"></el-table-column>
        <el-table-column prop="location" label="交互地点" width="200"></el-table-column>
        <el-table-column prop="outcome" label="交互结果" width="300"></el-table-column>
        <el-table-column  align="center" label="操作">  
        <template slot-scope="scope">  
          <el-button type="danger" icon="el-icon-delete" @click="deleteRecord(scope.$index)">删除</el-button>  
        </template>  
      </el-table-column>  
      </el-table>
      <!-- 分页组件 -->
      <el-pagination background layout="prev, pager, next" :page-size="10" :total=" pageTion.total"
        @current-change="handlePageChange"></el-pagination>
      
    </div>
  </div>
</template>

<script>
// import {getRecords,recordsISave, recordDelete } from '../../api/basisMG'
import Pagination from '../../components/Pagination'
export default {
  data() {
    return {
      RecordList: [], //数据
      // 分页参数
      pageTion: {
        currentPage: 1,
        pageSize: 10,
        total: 10
      },
      dialogVisible: false,  
      form: {  
        virtualId: '',  
        timestamp: '',  
        userId: '',  
        interactionType: '',  
        content: '',  
        outcome: ''  
      },
    }
  },
  // 注册组件
  components: {
    Pagination
  },
  created() {
    this.getdata(this.pageTion)
  },
  methods: {
    // 获取数据列表
    getdata(recordContent) {
      this.loading = true
      // 模拟数据开始
      let res = {
        code: 0,
        msg: null,
        count: 41,
        data: [
          {
            id: 1,
            virtualId: 'virtual-1',
            timestamp: '2023-04-01 10:00:00',
            userId: 'user-A',
            interactionType: 'Chat',
            content: 'Hello, how are you?',
            device: 'Laptop',
            location: 'Office',
            outcome: 'Success'
          },
          {
            id: 2,
            virtualId: 'virtual-2',
            timestamp: '2023-04-01 10:15:00',
            userId: 'user-B',
            interactionType: 'Gesture',
            content: 'Waved goodbye',
            device: 'Smartphone',
            location: 'Cafe',
            outcome: 'Success'
          },
          {
            id: 3,
            virtualId: 'virtual-1',
            timestamp: '2023-04-01 10:30:00',
            userId: 'user-C',
            interactionType: 'VoiceCommand',
            content: 'Play music',
            device: 'Smart Speaker',
            location: 'Living Room',
            outcome: 'Error'
          },
          {
            id: 4,
            virtualId: 'virtual-3',
            timestamp: '2023-04-01 11:00:00',
            userId: 'user-A',
            interactionType: 'Chat',
            content: 'What is the weather today?', 
              device: 'Tablet',
            location: 'Outdoor',
            outcome: 'Success'
          },
          {
            id: 5,
            virtualId: 'virtual-2',
            timestamp: '2023-04-01 11:15:00',
            userId: 'user-D',
            interactionType: 'Gesture',
            content: 'Pointed to the screen',
            device: 'Desktop',
            location: 'Office',
            outcome: 'Success'
          },
          {
            id: 6,
            virtualId: 'virtual-1',
            timestamp: '2023-04-01 11:30:00',
            userId: 'user-B',
            interactionType: 'Chat',
            content: 'Need help with task',
            device: 'Laptop',
            location: 'Home Office',
            outcome: 'Pending'
          },
          {
            id: 7,
            virtualId: 'virtual-3',
            timestamp: '2023-04-01 12:00:00',
            userId: 'user-C',
            interactionType: 'VoiceCommand',
            content: 'Open email',
            device: 'Smartphone',
            location: 'Gym',
            outcome: 'Success'
          },
          {
            id: 8,
            virtualId: 'virtual-2',
            timestamp: '2023-04-01 12:15:00',
            userId: 'user-A',
            interactionType: 'Gesture',
            content: 'Zoomed in',
            device: 'Tablet',
            location: 'Library',
            outcome: 'Success'
          },
          {
            id: 9,
            virtualId: 'virtual-1',
            timestamp: '2023-04-01 12:30:00',
            userId: 'user-D',
            interactionType: 'Chat',
            content: 'Scheduled a meeting',
            device: 'Desktop',
            location: 'Conference Room',
            outcome: 'Success'
          },
          {
            id: 10,
            virtualId: 'virtual-3',
            timestamp: '2023-04-01 12:45:00',
            userId: 'user-B',
            interactionType: 'VoiceCommand',
            content: 'Show notifications',
            device: 'Laptop',
            location: 'Kitchen',
            outcome: 'Error'
          }

        ]
      }
      this.RecordList = res.data
      this.pageTion.currentPage = this.pageTion.page
      this.pageTion.pageSize = this.pageTion.limit
      this.pageTion.total = res.count
      // 测试环境  模拟数据结束  

      /***
       *  正式环境环境 调用接口
       */
      //  getRecords(recordContent)
      //     .then(res => {
      //       this.loading = false
      //       if (res.success == false) {
      //         this.$message({
      //           type: 'info',
      //           message: res.msg
      //         })
      //       } else {
      //         this.RecordList = res.data
      //         // 分页赋值
      //         this.pageTion.currentPage = this.pageTion.page
      //         this.pageTion.pageSize = this.pageTion.limit
      //         this.pageTion.total = res.count
      //       }
      //     })
      //     .catch(err => {
      //       this.loading = false
      //       this.$message.error('交互记录加载失败，请稍后再试！')
      //     })
    },
    // 分页插件事件
    callFather(parm) {
      this.pageTion.page = parm.currentPage
      this.pageTion.limit = parm.pageSize
      this.getdata(this.pageTion)
    },
    // 搜索事件
    search() {
      this.getdata(this.pageTion)
    },

    // 删除交互记录
    deleteRecord(index, row) {
      this.$confirm(`确定要删除交互记录吗?`, '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          recordDelete(row.id)
            .then(res => {
              if (res.success===1) {
                this.$message({
                  type: 'success',
                  message: '交互记录已删除!'
                })
                this.getdata(this.pageTion)
              } else {
                this.$message({
                  type: 'info',
                  message: res.msg
                })
              }
            })
            .catch(err => {
              this.loading = false
              this.$message.error('交互记录删除失败！')
            })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除交互记录'
          })
        })
    },
    addRecordFromForm() {  
      this.$refs.form.validate((valid) => {  
        if (valid) {  
          // 表单验证通过，将表单数据添加到 interactionRecords 数组中  
          this.interactionRecords.push({  
            ...this.form  
          });  
          // 重置表单  
          this.$refs.form.resetFields();  
          // 关闭对话框  
          this.dialogVisible = false;  
        } else {  
          console.log('表单验证失败');  
          return false;  
        }  
      });  
    }  
  }
}
</script>

<style scoped>
.interaction-records-container{
  margin-top: 20px;
}
.addBtn{
  margin-top: 20px;
  margin-bottom: 20px;
  width: 108px;
height: 34px;
/* line-height: 34px; */
border-radius: 8px;
background-color: rgba(255, 246, 243, 1);
color: rgba(255, 81, 0, 1);
font-size: 14px;
text-align: center;
font-family: Roboto;
border: 1px solid rgba(255, 222, 207, 1);
}
.el-pagination{
  margin-top: 20px;
}
</style>

 
 